<template>
  <view>
    <view class="picker-modal" v-if="show"></view>
    <view class="picker-content" :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }">
      <view class="picker-header">
        <view @click="onClose">取消</view>
        <view class="packer-title">{{ title }}</view>
        <view @click="onConfirm">确定</view>
      </view>
      <picker-view indicator-style="height: 90rpx;" class="picker-view" :value="value" @change="onChange">
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in listData" :key="item.dictValue">{{ item.dictLabel }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
import { getDicts } from '@/api/system/dict.js'
export default {
  props: {
    //标题文字
    title: {
      type: String,
      default: ''
    },
    // 字典类型
    dictType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      show: false,
      value: [0],
      listData: []
    }
  },
  methods: {
    // 打开
    open() {
      this.show = true
      this.getData()
    },
    getData() {
      getDicts(this.dictType).then((res) => {
        this.listData = res.data
      })
    },
    //确定
    onConfirm() {
      this.show = false
      const selectData = {
        value: this.listData[this.value[0]].dictValue,
        name: this.listData[this.value[0]].dictLabel
      }
      this.$emit('confirm', selectData)
    },
    // 取消
    onClose() {
      this.show = false
    },
    //滑动picker
    onChange(e) {
      this.value = e.detail.value
    }
  }
}
</script>

<style lang="scss" scoped>
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.picker-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  transition: all 0.3s;
}
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}
.packer-title {
  text-align: center;
}
.picker-view {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  height: 490rpx;
  background-color: rgba(255, 255, 255, 1);
}
.picker-item {
  text-align: center;
  line-height: 46px;
  text-overflow: ellipsis;
}
</style>
